<template>
  <div class="bottomTab">
    <van-tabbar
      route
      active-color="#ee0a24"
      :height="400"
      inactive-color="#000"
    >
      <van-tabbar-item to="/home">
        <span>发现</span>
        <template #icon="props">
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="props.active ? '#icon-yinle2-copy' : '#icon-yinle2'"
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/podcast" icon="search">
        <span>播客</span>
        <template #icon="props">
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="
                props.active ? '#icon-wuxiandianbo-copy' : '#icon-wuxiandianbo'
              "
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/mine" icon="friends-o">
        <span>我的</span>
        <template #icon="props">
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="props.active ? '#icon-yinle1-copy' : '#icon-yinle1'"
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/attention" badge="3">
        <span>关注</span>
        <template #icon="props">
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="
                props.active ? '#icon-guanzhu-copy' : '#icon-guanzhu'
              "
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/cloud" badge="3">
        <span>云村</span>
        <template #icon="props">
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="props.active ? '#icon-yun-copy' : '#icon-yun'"
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup></script>

<style scoped lang="less">
.bottomTab {
  .van-tabbar {
    height: 60px;
    .icon {
      width: 25px;
      height: 25px;
    }
  }
}
</style>
